<template>
  <header class="header">
    <div class="header-content">
      <router-link to="/" class="logo">
        <i class="fas fa-graduation-cap"></i>
        讲懂笔记
      </router-link>
      <div class="header-actions">
        <div class="search-container" v-if="showSearch">
          <div class="search-input-wrapper">
            <i class="fas fa-search search-icon"></i>
            <input 
              type="text" 
              v-model="searchQuery"
              class="search-input" 
              placeholder="搜索笔记、章节..."
              @input="handleSearch"
              @keydown="handleKeydown"
            >
            <button 
              class="search-clear" 
              v-show="searchQuery"
              @click="clearSearch"
            >
              <i class="fas fa-times"></i>
            </button>
          </div>
          <div 
            class="search-results" 
            v-show="showSearchResults"
          >
            <div v-if="searchResults.length === 0 && searchQuery" class="search-no-results">
              <i class="fas fa-search"></i>
              <div>未找到匹配的内容</div>
              <div>尝试使用其他关键词</div>
            </div>
            <div 
              v-for="(result, index) in searchResults" 
              :key="result.id"
              class="search-result-item"
              :class="{ active: selectedIndex === index }"
              @click="selectSearchResult(result)"
            >
              <div class="search-result-title">
                <span class="result-type">{{ result.type === 'course' ? '笔记' : result.type === 'chapter' ? '章节' : result.type === 'video' ? '视频课程' : result.type === 'video-chapter' ? '视频章节' : '未知' }}</span>
                <span v-html="highlightText(result.title, searchQuery)"></span>
              </div>
              <div class="search-result-desc" v-if="result.description">
                <span v-html="highlightText(result.description, searchQuery)"></span>
              </div>
              <div class="search-result-meta">
                {{ result.meta }}
              </div>
            </div>
          </div>
        </div>
        
        <!-- User Authentication Section -->
        <div class="auth-section" v-if="!currentUser">
          <button class="btn btn-outline" @click="$emit('login')">
            <i class="fas fa-user-circle"></i>
            登录
          </button>
          <button class="btn btn-outline" @click="$emit('register')">
            <i class="fas fa-user-plus"></i>
            注册
          </button>
        </div>
        
        <!-- Battle Power & Level Display -->
        <div class="battle-stats" v-if="currentUser">
          <div class="level-display">
            <i class="fas fa-star"></i>
            <span class="level-text">LV.</span>
            <span class="level-number">{{ userLevel }}</span>
          </div>
          <div class="power-display">
            <i class="fas fa-bolt"></i>
            <span class="power-text">战斗力</span>
            <span class="power-number">{{ formatNumber(battlePower) }}</span>
          </div>
        </div>
        
        <!-- User Profile Section -->
        <div class="user-profile" v-if="currentUser">
          <div class="user-info user-dropdown" :class="{ active: showDropdown }">
            <div class="user-info-trigger" @click="toggleDropdown">
              <i class="fas fa-user-circle"></i>
              <span>{{ currentUser.name }}</span>
              <i class="fas fa-chevron-down dropdown-arrow"></i>
            </div>
            <div class="user-dropdown-menu">
              <router-link to="/course" class="dropdown-item" v-if="isUserAdmin()">
                <i class="fas fa-plus"></i>
                <span>创建笔记</span>
              </router-link>
              <router-link to="/video-course" class="dropdown-item" v-if="isUserAdmin()">
                <i class="fas fa-video"></i>
                <span>创建视频课程</span>
              </router-link>
              <router-link to="/todolist" class="dropdown-item">
                <i class="fas fa-tasks"></i>
                <span>计划列表</span>
              </router-link>
              <router-link to="/profile" class="dropdown-item">
                <i class="fas fa-user-cog"></i>
                <span>个人中心</span>
              </router-link>
              <!-- 用户管理菜单项 -->
              <router-link to="/user-management" class="dropdown-item" v-if="isUserAdmin()">
                <i class="fas fa-users-cog"></i>
                <span>用户管理</span>
              </router-link>
              <div class="dropdown-divider"></div>
              <button class="dropdown-item" @click="handleLogout">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 用户管理模态框 -->
    <div class="modal" v-if="showUserManagementModal">
      <div class="modal-content user-management-modal">
        <div class="modal-header">
          <h3>用户管理</h3>
          <button class="modal-close" @click="hideUserManagement">&times;</button>
        </div>
        <div class="modal-body">
          <div class="user-list">
            <div 
              v-for="user in users" 
              :key="user.id" 
              class="user-item"
              :class="{ 'current-user': user.id === currentUser.id }"
            >
              <div class="user-info">
                <div class="user-name">{{ user.name }}</div>
                <div class="user-email">{{ user.email }}</div>
                <div class="user-role" :class="user.role">{{ user.role === 'admin' ? '管理员' : '普通用户' }}</div>
              </div>
              <div class="user-actions" v-if="user.id !== currentUser.id">
                <button 
                  class="btn btn-outline btn-small" 
                  @click="editUser(user)"
                  :disabled="user.name === '系统管理员'"
                >
                  编辑
                </button>
                <button 
                  class="btn btn-danger btn-small" 
                  @click="deleteUser(user)"
                  :disabled="user.name === '系统管理员'"
                >
                  删除
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="hideUserManagement">关闭</button>
        </div>
      </div>
    </div>
    
    <!-- 编辑用户模态框 -->
    <div class="modal" v-if="showEditUserModal">
      <div class="modal-content edit-user-modal">
        <div class="modal-header">
          <h3>编辑用户</h3>
          <button class="modal-close" @click="hideEditUser">&times;</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveUser">
            <div class="form-group">
              <label>用户名:</label>
              <input 
                type="text" 
                v-model="editingUser.name" 
                class="form-control"
                :disabled="editingUser.name === '系统管理员'"
              >
            </div>
            <div class="form-group">
              <label>邮箱:</label>
              <input 
                type="email" 
                v-model="editingUser.email" 
                class="form-control"
                :disabled="editingUser.name === '系统管理员'"
              >
            </div>
            <div class="form-group">
              <label>角色:</label>
              <select 
                v-model="editingUser.role" 
                class="form-control"
                :disabled="editingUser.name === '系统管理员'"
              >
                <option value="user">普通用户</option>
                <option value="admin">管理员</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="hideEditUser">取消</button>
          <button 
            class="btn btn-primary" 
            @click="saveUser"
            :disabled="editingUser.name === '系统管理员'"
          >
            保存
          </button>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
/* eslint-disable no-unused-vars */
import apiService from '@/services/api.js'

export default {
  name: 'AppHeader',
  props: {
    currentUser: {
      type: Object,
      default: null
    },
    courses: {
      type: Array,
      default: () => []
    },
    videoCourses: {
      type: Array,
      default: () => []
    },
    tasks: {
      type: Array,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: true
    }
  },
  emits: ['login', 'register', 'logout', 'search', 'show-battle-power'],
  data() {
    return {
      searchQuery: '',
      showSearchResults: false,
      showDropdown: false,
      searchResults: [],
      selectedIndex: -1,
      searchTimeout: null,
      dynamicBattlePower: 0, // 用于存储从后端获取的动态战斗力
      showUserManagementModal: false, // 用户管理模态框显示状态
      showEditUserModal: false, // 编辑用户模态框显示状态
      users: [], // 用户列表
      editingUser: { // 正在编辑的用户
        id: null,
        name: '',
        email: '',
        role: 'user'
      }
    }
  },
  computed: {
    userLevel() {
      // 用户等级基于四个维度的平均进度计算
      if (!this.currentUser) return 1
      const levelProgress = this.calculateLevelProgress()
      return Math.floor(levelProgress) + 1
    },
    battlePower() {
      // 优先使用从后端获取的动态战斗力，如果没有则使用计算的战斗力
      if (this.dynamicBattlePower > 0) {
        return this.dynamicBattlePower
      }
      
      // 如果currentUser包含battlePower属性，直接使用
      if (this.currentUser && this.currentUser.battlePower !== undefined) {
        return this.currentUser.battlePower
      }
      
      if (!this.currentUser) return 0
      // Calculate battle power based on user activities
      return this.calculateBattlePower()
    }
  },
  watch: {
    // 监听 currentUser 变化，当用户登录时获取动态战斗力
    currentUser: {
      handler(newVal, oldVal) {
        if (newVal && newVal.id) {
          this.fetchDynamicBattlePower()
        }
      },
      immediate: true
    }
  },
  mounted() {
    // Close dropdown when clicking outside
    document.addEventListener('click', this.handleClickOutside)
    
    // 如果用户已登录，获取动态战斗力
    if (this.currentUser && this.currentUser.id) {
      this.fetchDynamicBattlePower()
    }
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside)
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout)
    }
  },
  methods: {
    handleSearch() {
      const query = this.searchQuery.trim()
      
      if (query.length > 0) {
        // Clear previous timeout
        if (this.searchTimeout) {
          clearTimeout(this.searchTimeout)
        }
        
        // Debounce search with 300ms delay
        this.searchTimeout = setTimeout(() => {
          this.performSearch(query)
        }, 300)
        
        this.showSearchResults = true
      } else {
        this.hideSearchResults()
      }
      
      this.$emit('search', this.searchQuery)
    },
    
    performSearch(query) {
      const results = []
      
      // Search in courses
      if (this.courses && Array.isArray(this.courses)) {
        this.courses.forEach(course => {
          // 搜索课程名称
          if (course.name && course.name.toLowerCase().includes(query.toLowerCase())) {
            results.push({
              id: `course-${course.id}`,
              title: course.name,
              description: course.description || '',
              type: 'course',
              route: '/course',
              params: { courseId: course.id }
            })
          }
          
          // 搜索课程章节
          if (course.chapters && Array.isArray(course.chapters)) {
            course.chapters.forEach(chapter => {
              if (chapter.title && chapter.title.toLowerCase().includes(query.toLowerCase())) {
                results.push({
                  id: `chapter-${chapter.id}`,
                  title: chapter.title,
                  description: this.getTextPreview(chapter.content || ''),
                  type: 'chapter',
                  route: '/course',
                  params: { courseId: course.id, chapterId: chapter.id }
                })
              }
            })
          }
        })
      }
      
      // Search in video courses
      if (this.videoCourses && Array.isArray(this.videoCourses)) {
        this.videoCourses.forEach(course => {
          // 搜索视频课程名称
          if (course.name && course.name.toLowerCase().includes(query.toLowerCase())) {
            results.push({
              id: `video-course-${course.id}`,
              title: course.name,
              description: course.description || '',
              type: 'video',
              route: '/video-course',
              params: { courseId: course.id }
            })
          }
          
          // 搜索视频章节
          if (course.chapters && Array.isArray(course.chapters)) {
            course.chapters.forEach(chapter => {
              if (chapter.title && chapter.title.toLowerCase().includes(query.toLowerCase())) {
                results.push({
                  id: `video-chapter-${chapter.id}`,
                  title: chapter.title,
                  description: this.getTextPreview(chapter.description || ''),
                  type: 'video-chapter',
                  route: '/video-course',
                  params: { courseId: course.id, chapterId: chapter.id }
                })
              }
            })
          }
        })
      }
      
      this.searchResults = results.slice(0, 10) // Limit to 10 results
      this.selectedIndex = -1
    },
    
    selectSearchResult(result) {
      this.hideSearchResults()
      this.searchQuery = ''
      
      // Navigate to the result
      if (result.params) {
        this.$router.push({ path: result.route, query: result.params })
      } else {
        this.$router.push(result.route)
      }
    },
    
    hideSearchResults() {
      this.showSearchResults = false
      this.searchResults = []
      this.selectedIndex = -1
    },
    
    highlightText(text, query) {
      if (!query || !text) return text
      const regex = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi')
      return text.replace(regex, '<span class="search-highlight">$1</span>')
    },
    
    getTextFromHtml(html) {
      const div = document.createElement('div')
      div.innerHTML = html
      return div.textContent || div.innerText || ''
    },
    
    getTextPreview(html, maxLength = 100) {
      const text = this.getTextFromHtml(html)
      return text.length > maxLength ? text.substring(0, maxLength) + '...' : text
    },
    
    getPriorityText(priority) {
      const priorityMap = {
        low: '低',
        medium: '中', 
        high: '高'
      }
      return priorityMap[priority] || '中'
    },
    clearSearch() {
      this.searchQuery = ''
      this.hideSearchResults()
      this.$emit('search', '')
    },
    
    handleKeydown(e) {
      if (!this.showSearchResults) {
        if (e.key === 'Escape') {
          this.clearSearch()
        }
        return
      }
      
      const items = this.searchResults
      
      switch (e.key) {
        case 'ArrowDown':
          e.preventDefault()
          this.selectedIndex = Math.min(this.selectedIndex + 1, items.length - 1)
          break
          
        case 'ArrowUp':
          e.preventDefault()
          this.selectedIndex = Math.max(this.selectedIndex - 1, -1)
          break
          
        case 'Enter':
          e.preventDefault()
          if (this.selectedIndex >= 0 && items[this.selectedIndex]) {
            this.selectSearchResult(items[this.selectedIndex])
          }
          break
          
        case 'Escape':
          this.hideSearchResults()
          break
      }
    },
    toggleDropdown() {
      this.showDropdown = !this.showDropdown
    },
    handleClickOutside(e) {
      // Close dropdown and search results when clicking outside
      if (!this.$el.contains(e.target)) {
        this.showDropdown = false
        
        // Only hide search results if not clicking on search container
        if (!e.target.closest('.search-container')) {
          this.hideSearchResults()
        }
      }
    },
    handleLogout() {
      this.showDropdown = false
      this.$emit('logout')
    },
    // 新增方法：从后端获取动态战斗力
    async fetchDynamicBattlePower() {
      if (!this.currentUser || !this.currentUser.id) return
      
      try {
        // 调用后端API刷新战斗力
        const response = await fetch('http://localhost:3000/api/auth/refresh-battle-power', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
          }
        })
        
        if (response.ok) {
          const data = await response.json()
          if (data.success && data.data && data.data.battlePower !== undefined) {
            this.dynamicBattlePower = data.data.battlePower
          }
        }
      } catch (error) {
        console.error('获取动态战斗力失败:', error)
        // 如果获取失败，回退到计算战斗力
        this.dynamicBattlePower = 0
      }
    },
    // 新增方法：计算等级进度（基于四个维度）
    calculateLevelProgress() {
      // 这里需要从props获取数据来计算进度
      // 由于AppHeader没有直接访问到详细数据，我们简化计算
      // 实际进度计算应该在AppSidebar中进行，这里保持与之前一致
      if (!this.currentUser) return 0
      
      // 如果有战斗力数据，基于战斗力计算等级进度
      if (this.battlePower > 0) {
        // 假设每级需要50点战斗力（与之前保持一致）
        return this.battlePower / 50
      }
      
      return 0
    },
    calculateBattlePower() {
      // 如果有currentUser且包含battlePower属性，直接使用
      if (this.currentUser && typeof this.currentUser.battlePower !== 'undefined') {
        return this.currentUser.battlePower
      }
      
      // 否则基于传入的props数据计算战斗力
      let power = 0
      
      // Course creation: +20 each
      power += this.courses.length * 10  // 调整权重
      
      // Video course creation: +30 each
      power += this.videoCourses.length * 15  // 调整权重
      
      // Chapter content: +10 each
      this.courses.forEach(course => {
        power += (course.chapters || []).length * 3  // 调整权重
      })
      
      this.videoCourses.forEach(course => {
        power += (course.chapters || []).length * 3  // 调整权重
      })
      
      // Completed tasks: +5 each
      const completedTasks = this.tasks.filter(task => task.status === 'completed')
      power += completedTasks.length * 3  // 调整权重
      
      return power
    },
    // 新增方法：格式化数字，避免科学计数法
    formatNumber(value) {
      if (value === null || value === undefined) return '0'
      // 处理极小的数值
      if (Math.abs(value) < 1e-10) return '0'
      // 保留两位小数
      return parseFloat(value.toFixed(2))
    },
    // 新增方法：判断用户是否为管理员
    isUserAdmin() {
      // 检查 currentUser 是否存在且具有 role 属性
      if (this.currentUser && this.currentUser.role) {
        return this.currentUser.role === 'admin'
      }
      // 默认情况下，只有"系统管理员"用户是管理员
      return this.currentUser && this.currentUser.name === '系统管理员'
    }
  }
}
</script>

<style scoped>
.header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.logo:hover {
  color: #3b82f6;
}

.logo i {
  color: #3b82f6;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Search Container */
.search-container {
  position: relative;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 300px;
  padding: 0.75rem 2.5rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  transition: all 0.3s ease;
  background: #f8fafc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 4px 6px rgba(59, 130, 246, 0.1);
}

.search-input::placeholder {
  color: #94a3b8;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  color: #94a3b8;
  z-index: 1;
  font-size: 14px;
  top: 50%;
  transform: translateY(-50%);
}

.search-clear {
  position: absolute;
  right: 0.75rem;
  background: #e2e8f0;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear:hover {
  background: #cbd5e1;
  color: #1e293b;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  margin-top: 0.25rem;
}

.search-result-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s ease;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background-color: #f8fafc;
}

.search-result-item.active {
  background-color: #eff6ff;
}

.search-result-title {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.result-type {
  font-size: 10px;
  background: #e0e7ff;
  color: #3730a3;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.search-result-desc {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 0.25rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-meta {
  font-size: 10px;
  color: #94a3b8;
}

.search-highlight {
  background-color: #fef3c7;
  padding: 0.125rem 0.25rem;
  border-radius: 3px;
  font-weight: 600;
}

.search-no-results {
  padding: 1rem;
  text-align: center;
  color: #64748b;
  font-size: 11px;
}

.search-no-results i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
  display: block;
}

/* Auth Section */
.auth-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Buttons */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border: none;
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
}

.btn-ghost:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.btn-outline {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.btn-outline:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

.btn-danger {
  background: #ef4444;
  color: white;
}

.btn-danger:hover {
  background: #dc2626;
}

.btn-secondary {
  background: #64748b;
  color: white;
}

.btn-secondary:hover {
  background: #475569;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-small {
  padding: 0.25rem 0.5rem;
  font-size: 11px;
}

/* Battle Stats */
.battle-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  background: #f8fafc;
  border-radius: 8px;
}

.level-display, .power-display {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 600;
}

.level-display i {
  color: #fbbf24;
}

.power-display i {
  color: #3b82f6;
}

.level-number, .power-number {
  color: #1e293b;
}

/* User Profile Dropdown */
.user-dropdown {
  position: relative;
}

.user-info-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  font-size: 12px;
}

.user-info-trigger:hover {
  background: #f1f5f9;
}

.dropdown-arrow {
  transition: transform 0.2s ease;
}

.user-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  min-width: 200px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.user-dropdown.active .user-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 12px;
  color: #64748b;
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background: #f8fafc;
  color: #1e293b;
}

.dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 0.5rem 0;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.user-management-modal {
  max-width: 600px;
}

.modal-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #64748b;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.modal-close:hover {
  background: #f1f5f9;
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* User List Styles */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
}

.user-item.current-user {
  border-color: #3b82f6;
  background: #eff6ff;
}

.user-info {
  flex: 1;
}

.user-name {
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.25rem;
}

.user-email {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.user-role {
  font-size: 10px;
  padding: 0.125rem 0.5rem;
  border-radius: 12px;
  display: inline-block;
}

.user-role.admin {
  background: #fee2e2;
  color: #dc2626;
}

.user-role.user {
  background: #dbeafe;
  color: #2563eb;
}

.user-actions {
  display: flex;
  gap: 0.5rem;
}

/* Form Styles */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 12px;
  transition: border-color 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: #3b82f6;
}

.form-control:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 1rem;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .search-input {
    width: 200px;
  }
  
  .header-actions {
    gap: 0.5rem;
  }
  
  .battle-stats {
    gap: 0.5rem;
  }
}
</style>